<template>
  <div class="mbti-test">
    <h1 class="main-title">MBTI性格测试</h1>
    <MbtiIntro v-if="!selectedTest && !result" />
    <div class="questionnaire-selection" v-if="!selectedTest && !result">
      <h2>选择测试版本</h2>
      <button class="select-btn" @click="selectTest('simple')">简易版测试</button>
      <button class="select-btn" @click="selectTest('pro')">专业版测试</button>
    </div>
    <transition name="fade-slide">
      <div v-if="selectedTest === 'simple' && !result">
        <MbtiQuestionnaireSimple @submit="handleSubmit" @error="handleError" />
      </div>
    </transition>
    <transition name="fade-slide">
      <div v-if="selectedTest === 'pro' && !result">
        <MbtiQuestionnairePro @submit="handleSubmit" @error="handleError" />
      </div>
    </transition>
    <MbtiResult v-if="result" :result="result" @retry="handleRetry" />

    <view v-if="errorMsg" class="error-msg">{{ errorMsg }}</view>
  </div>
  <FloatButton />
</template>

<script>
import MbtiIntro from './components/MbtiIntro.vue'
import MbtiQuestionnaireSimple from './components/MbtiQuestionnaireSimple.vue'
import MbtiQuestionnairePro from './components/MbtiQuestionnairePro.vue'
import MbtiResult from './components/MbtiResult.vue'
import FloatButton from '@/components/FloatButton.vue'

export default {
  components: {
    FloatButton,
    MbtiIntro,
    MbtiQuestionnaireSimple,
    MbtiQuestionnairePro,
    MbtiResult
  },
  data() {
    return {
      selectedTest: null,
      result: null,
      errorMsg: ''
    }
  },
  created() {
    // 页面加载时检查本地缓存
    let cache = null
    try {
      cache = uni.getStorageSync ? uni.getStorageSync('mbti_result') : null
    } catch (e) {
      cache = null
    }
    if (cache && cache.type) {
      this.result = cache
    }
  },
  // 分享到聊天
  onShareAppMessage() {
    return getShareAppMessageConfig({
      title: 'MBTI性格测试 - 安记录丨工具舱',
      path: '/pages-sub/mbti/index',
      imageUrl: '/static/share-img.png'
    })
  },
  // 分享到朋友圈
  onShareTimeline() {
    return getShareTimelineConfig({
      title: 'MBTI性格测试 - 安记录丨工具舱',
      imageUrl: '/static/share-img.png'
    })
  },
  methods: {
    selectTest(testType) {
      this.selectedTest = testType
      this.result = null
      this.errorMsg = ''
    },
    handleRetry() {
      this.selectedTest = null
      this.result = null
      this.errorMsg = ''
    },
    handleSubmit(payload) {
      // 简易版MBTI类型计算
      if (this.selectedTest === 'simple') {
        const answers = payload.answers
        // 题目顺序：EI, SN, TF, JP, EI, SN, TF, JP...
        const dimOrder = ['EI', 'SN', 'TF', 'JP']
        const dimScore = { E: 0, I: 0, S: 0, N: 0, T: 0, F: 0, J: 0, P: 0 }
        answers.forEach((ans, idx) => {
          dimScore[ans]++
        })
        // 计算每个维度
        const type = [
          dimScore['E'] >= dimScore['I'] ? 'E' : 'I',
          dimScore['S'] >= dimScore['N'] ? 'S' : 'N',
          dimScore['T'] >= dimScore['F'] ? 'T' : 'F',
          dimScore['J'] >= dimScore['P'] ? 'J' : 'P'
        ].join('')
        // 16型分4大类
        const mbtiGroups = {
          分析家: ['INTJ', 'INTP', 'ENTJ', 'ENTP'],
          外交家: ['INFJ', 'INFP', 'ENFJ', 'ENFP'],
          守护者: ['ISTJ', 'ISFJ', 'ESTJ', 'ESFJ'],
          探险家: ['ISTP', 'ISFP', 'ESTP', 'ESFP']
        }
        // 结果描述、性格特点、职业建议
        const mbtiProfiles = {
          INTJ: {
            group: '分析家',
            desc: '富有战略眼光，善于规划，独立理性，追求效率和创新。',
            traits: ['独立', '理性', '有远见', '分析力强', '目标导向'],
            jobs: ['科学家', '战略顾问', '程序员', '工程师', '产品经理']
          },
          INTP: {
            group: '分析家',
            desc: '逻辑思维、喜欢探索，善于分析和创新，追求真理和知识。',
            traits: ['理性', '好奇', '独立', '创新', '逻辑性强'],
            jobs: ['科学家', '程序员', '学者', '工程师', '数据分析']
          },
          ENTJ: {
            group: '分析家',
            desc: '果断自信、领导能力强，善于制定和实现目标，喜欢挑战和创新。',
            traits: ['自信', '果断', '领导力强', '战略思维', '目标导向'],
            jobs: ['高管', '企业家', '项目经理', '律师', '管理顾问']
          },
          ENTP: {
            group: '分析家',
            desc: '机智灵活、善于辩论，喜欢新奇和挑战，思维敏捷，善于创新。',
            traits: ['机智', '灵活', '善于辩论', '创新', '好奇'],
            jobs: ['律师', '创业者', '市场策划', '产品经理', '媒体']
          },
          INFJ: {
            group: '外交家',
            desc: '理想主义、富有洞察力，追求意义和价值，善于理解他人，富有同理心。',
            traits: ['有同理心', '理想主义', '洞察力强', '忠诚', '富有创意'],
            jobs: ['心理咨询', '作家', '教育', '艺术家', '公益组织']
          },
          INFP: {
            group: '外交家',
            desc: '理想主义、富有创意，追求内心价值和意义，善于理解他人。',
            traits: ['理想主义', '富有创意', '忠诚', '善解人意', '独立'],
            jobs: ['作家', '心理咨询', '艺术家', '编辑', '教育']
          },
          ENFJ: {
            group: '外交家',
            desc: '富有同理心、善于激励，擅长沟通和组织，关注他人发展。',
            traits: ['同理心', '激励他人', '组织力强', '善于沟通', '领导力'],
            jobs: ['心理咨询', '教师', '管理者', '培训师', '社会活动家']
          },
          ENFP: {
            group: '外交家',
            desc: '热情创新、善于沟通，富有想象力和感染力，喜欢激励他人。',
            traits: ['热情', '创新', '善于沟通', '理想主义', '适应力强'],
            jobs: ['公关', '作家', '心理咨询', '市场策划', '教育']
          },
          ISTJ: {
            group: '守护者',
            desc: '责任心强、严谨务实、值得信赖，注重细节，喜欢有序和规则的环境。',
            traits: ['可靠', '有条理', '实际', '守纪律', '坚持原则'],
            jobs: ['会计', '审计', '工程师', '公务员', '项目管理']
          },
          ISFJ: {
            group: '守护者',
            desc: '温和体贴、乐于助人、忠诚可靠，注重他人感受，善于照顾和服务他人。',
            traits: ['体贴', '耐心', '有责任感', '细致', '忠诚'],
            jobs: ['护士', '教师', '行政', '社会工作者', '医疗行业']
          },
          ESTJ: {
            group: '守护者',
            desc: '务实果断、组织能力强，注重效率和规则，善于管理和决策。',
            traits: ['务实', '果断', '组织力强', '责任心强', '领导力'],
            jobs: ['经理', '项目主管', '军官', '行政管理', '法务']
          },
          ESFJ: {
            group: '守护者',
            desc: '友善合群、乐于服务，重视团队和谐，善于协调和组织。',
            traits: ['友善', '合群', '乐于服务', '责任心', '沟通力强'],
            jobs: ['教师', '护士', '行政', '客户服务', '人力资源']
          },
          ISTP: {
            group: '探险家',
            desc: '冷静客观、动手能力强，喜欢解决实际问题，适应力强，喜欢自由。',
            traits: ['务实', '灵活', '分析力强', '独立', '果断'],
            jobs: ['工程师', '飞行员', '运动员', '机械师', '急救人员']
          },
          ISFP: {
            group: '探险家',
            desc: '温和谦逊、追求和谐，重视个人价值和美感，喜欢自由和创造。',
            traits: ['温柔', '谦逊', '感性', '艺术气质', '适应力强'],
            jobs: ['设计师', '艺术家', '社会工作者', '音乐家', '摄影师']
          },
          ESTP: {
            group: '探险家',
            desc: '果断现实、喜欢冒险，善于应对变化和挑战，行动力强。',
            traits: ['果断', '现实', '冒险精神', '灵活', '适应力强'],
            jobs: ['销售', '企业家', '运动员', '警察', '应急管理']
          },
          ESFP: {
            group: '探险家',
            desc: '活泼外向、乐于助人，喜欢与人互动，享受当下。',
            traits: ['外向', '乐观', '适应力强', '热情', '善于沟通'],
            jobs: ['演员', '教师', '公关', '主持人', '旅游行业']
          }
        }
        const profile = mbtiProfiles[type] || { group: '', desc: '', traits: [], jobs: [] }
        this.result = {
          type,
          group: profile.group,
          description: profile.desc,
          traits: profile.traits,
          jobs: profile.jobs
        }
        // 保存到本地缓存
        try {
          if (uni.setStorageSync) {
            uni.setStorageSync('mbti_result', this.result)
          }
        } catch (e) {}
      } else {
        // 专业版直接透传
        this.result = payload
        // 保存到本地缓存
        try {
          if (uni.setStorageSync) {
            uni.setStorageSync('mbti_result', this.result)
          }
        } catch (e) {}
      }
    },
    handleError(msg) {
      this.errorMsg = msg
      if (typeof uni !== 'undefined' && uni.showToast) {
        uni.showToast({ title: msg, icon: 'none' })
      }
    }
  }
}
</script>

<style scoped>
.mbti-test {
  min-height: 100vh;
  background: linear-gradient(135deg, #e0e7ff 0%, #fff 100%);
  max-width: 700rpx;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: 60rpx;
  box-sizing: border-box;
}

.main-title {
  font-size: 48rpx;
  font-weight: 700;
  color: #4f8cff;
  margin: 64rpx 0 36rpx 0;
  letter-spacing: 2rpx;
  text-align: center;
  line-height: 1.2;
  text-shadow: 0 2rpx 8rpx #e0e7ff;
}

.questionnaire-selection {
  margin: 40rpx 0 28rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
}

.questionnaire-selection h2 {
  font-size: 32rpx;
  font-weight: 600;
  color: #222;
  margin-bottom: 12rpx;
  letter-spacing: 1rpx;
  text-align: center;
}

.select-btn {
  margin: 0 0 0 0;
  padding: 26rpx 70rpx;
  font-size: 34rpx;
  border-radius: 16rpx;
  background: linear-gradient(90deg, #4f8cff, #6fd6ff);
  color: #fff;
  border: none;
  box-shadow: 0 2rpx 8rpx rgba(79, 140, 255, 0.1);
  font-weight: 600;
  transition: background 0.2s;
  margin-bottom: 12rpx;
  letter-spacing: 1rpx;
  text-align: center;
}

.select-btn:active {
  background: #3b82f6;
}

.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.fade-slide-enter-from,
.fade-slide-leave-to {
  opacity: 0;
  transform: translateY(40rpx);
}

.error-msg {
  color: #e43;
  margin-top: 24rpx;
  font-size: 28rpx;
  text-align: center;
}

.mbti-result {
  margin-top: 36rpx;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 12rpx 0 rgba(79, 140, 255, 0.06);
  padding: 36rpx 24rpx 32rpx 24rpx;
  max-width: 600rpx;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.mbti-result-type {
  font-size: 40rpx;
  font-weight: 700;
  color: #4f8cff;
  margin-bottom: 18rpx;
  text-align: center;
}

.mbti-result-desc {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 18rpx;
  text-align: center;
}

.mbti-result-section-title {
  font-size: 26rpx;
  font-weight: 600;
  color: #4f8cff;
  margin: 18rpx 0 8rpx 0;
}

.mbti-result-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-bottom: 8rpx;
  justify-content: center;
}

.mbti-result-list-item {
  background: #e0e7ff;
  color: #2253a7;
  border-radius: 10rpx;
  padding: 8rpx 18rpx;
  font-size: 24rpx;
  font-weight: 500;
}
</style>
